<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>视频倍数播放</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<link rel="stylesheet" href="waitMe.css">
<link rel="stylesheet" href="speed.css">

<body>

	<section class="input">
		<input type="text" placeholder="请输入网络视频地址" id="input" class="fl">
		<button class="fl" id="waitMe_ex">确定</button>
		<button class="fl" id="waitMe_ex_close">清空</button>
		<a href="explain.html" class="fr">使用说明</a>
	</section>
	<section>
		<span class="fl">选择本地视频：</span>
		<input type="file" name="file" id="fileUpload" class="fl">
	</section>

	<video src="https://evanzhang1994.gitee.io/videospeedy/demo.mp4" id='video' controls preload controlslist="download" type="video/mp4"></video>
	<p class="speed">
		<span class="fw">选择播放速率:&nbsp;&nbsp;&nbsp;X</span>
		<select id="selRate">
			<option value="0.5">0.5</option>
			<option value="0.75">0.75</option>
			<option value="1" selected>1.0</option>
			<option value="1.2">1.2</option>
			<option value="1.3">1.3</option>
			<option value="1.4">1.4</option>
			<option value="1.5">1.5</option>
			<option value="1.6">1.6</option>
			<option value="1.7">1.7</option>
			<option value="1.8">1.8</option>
			<option value="1.9">1.9</option>
			<option value="2">2.0</option>
			<option value="3">3.0</option>
			<option value="4">4.0</option>
		</select>
	</p>
	<div class="speed">
			<input type="number" placeholder="自定义速度，0.1-16" id="selfspeed">
			<button class="surespeed">确定</button>
	</div>
	<div class="hover">
		<div id="container" class="input">
			<form>
			</form>

		</div>
	</div>
</body>
<script src="jquery-3.2.1.min.js"></script>
<script src="waitMe.js"></script>
<script>
	$(function () {
		var input = $('#input');
		var volumeStep = 0.1; //声音每次加减数量,范围0-1
		var timeStep = 30; //快进快退秒数
		var myVid = document.getElementById("video");
		var eleSelect = document.getElementById('selRate');
		//键盘事件
		document.onkeydown = function (event) {
			var e = event || window.event || arguments.callee.caller.arguments[0];
			if (e && e.keyCode == 32) { //按空格控制播放暂停 
				if (myVid.paused) {
					myVid.play()
				} else {
					myVid.pause()
				}
			}
			if (e && e.keyCode == 37) { // 左箭头
				if (myVid.currentTime > 0) {
					myVid.currentTime = accSub(myVid.currentTime, timeStep)
				}
			}
			if (e && e.keyCode == 38) { // 上箭头
				if (myVid.volume < 1) {
					myVid.volume = accAdd(myVid.volume, volumeStep)
				}

			}
			if (e && e.keyCode == 39) { // 右箭头
				if (myVid.currentTime < myVid.duration) {
					myVid.currentTime = accAdd(myVid.currentTime, timeStep)
				}
			}
			if (e && e.keyCode == 40) { // 下箭头

				if (myVid.volume > 0) {
					myVid.volume = accSub(myVid.volume, volumeStep)
				}

			}
		};
		// 选择速度
		eleSelect.addEventListener('change', function () {
			myVid.playbackRate = this.value;
			$('#selfspeed').val('');
		});
		//自定义速度
		$('.surespeed').click(function () {
			var selfNumber = $('#selfspeed').val();
			if (!selfNumber) {
				showToast('roundBounce', '请输入自定义速度', 1500)
			} else {
				if (isNumber(selfNumber)) {
					if (selfNumber < 0.1 || selfNumber > 16) {
						showToast('roundBounce', '必须在0.1-16之间', 1500)
					} else {
						myVid.playbackRate = selfNumber
					}
				} else {
					showToast('roundBounce', '请输入数字', 1500)
				}


			}
		})
		//绑定单击加载事件，并绑定加载动画到表单
		$('#waitMe_ex').click(function () {
			//输入为空
			if (!input.val().replace(/\s+/g, "")) {
				showToast('roundBounce', '请输入视频地址', 1500)
			} else {

				$('.hover').show()
				$('#container > form').waitMe({
					effect: 'timer',
					text: '请稍候...',
					bg: 'rgba(255,255,255,0.7)',
					color: '#fff',
					sizeW: '100px',
					sizeH: '100px'
				});
				myVid.src = input.val();
				myVid.play()
				$('#selRate').val(1); //默认选择为1倍速度
				myVid.playbackRate = 1;
				$('#selfspeed').val('')
				$('.hover').hide()
				$('#container > form').waitMe('hide');
			}

		});
		$('#waitMe_ex_close').click(function () {
			input.val('')
		});
		//上传本地文件
		$("#fileUpload").change(function () {
			myVid.src = URL.createObjectURL($("#fileUpload")[0].files[0]);
			$('#selRate').val(1); //默认选择为1倍速度
			myVid.playbackRate = 1;
			$('#selfspeed').val('')
		});
		// 		effect – 动画效果 (string).
		// 用法: ‘bounce’默认值，其它可选值： none, rotateplane, stretch, orbit, roundBounce, win8, win8_linear,ios, facebook, rotation, timer.

		// text -在动画下方显示的文字 (string).
		// 用法: ‘text’. 你想显示的文字

		// bg – 背景颜色 (string).
		// 用法: ‘rgba(255,255,255,0.7)’.你可以使用颜色或图片

		// color – 背景动画和文本的颜色 (string).
		// 用法: ‘#000’

		// sizeW – 动画元素的宽度 (string).
		// 用法: ’40px’.默认值40px

		// sizeH – 动画元素的高度 (string).
		// 用法: ’40px’.默认值40px
		// 		方法

		// hide – 关闭加载动画waitMe.
		// Use: $(container).waitMe(“hide”);
		//相加精度
		function accAdd(num1, num2) {
			var r1, r2, m;
			try {
				r1 = num1.toString().split('.')[1].length;
			} catch (e) {
				r1 = 0;
			}
			try {
				r2 = num2.toString().split(".")[1].length;
			} catch (e) {
				r2 = 0;
			}
			m = Math.pow(10, Math.max(r1, r2));
			// return (num1*m+num2*m)/m;  
			return Math.round(num1 * m + num2 * m) / m;
		}

		// 相减精度
		function accSub(num1, num2) {
			var r1, r2, m, n;
			try {
				r1 = num1.toString().split('.')[1].length;
			} catch (e) {
				r1 = 0;
			}
			try {
				r2 = num2.toString().split(".")[1].length;
			} catch (e) {
				r2 = 0;
			}
			m = Math.pow(10, Math.max(r1, r2));
			n = (r1 >= r2) ? r1 : r2;
			return (Math.round(num1 * m - num2 * m) / m).toFixed(n);
		}
		//判断是否为数字
		function isNumber(val) {

			var regPos = /^\d+(\.\d+)?$/; //非负浮点数
			var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数
			if (regPos.test(val) || regNeg.test(val)) {
				return true;
			} else {
				return false;
			}

		}
		//弹窗
		function showToast(effect, word, time) {
			$('.hover').show()
			$('#container > form').waitMe({
				effect: effect,
				text: word,
				bg: 'rgba(255,255,255,0.7)',
				color: '#fff',
				sizeW: '100px',
				sizeH: '100px'
			});
			setTimeout(function () {
				$('.hover').hide()
				$('#container > form').waitMe('hide');
			}, time)
		}
	})
</script>

</html>